<template>
  <div class="l-preview" v-if="preview" :style="{zIndex: zIndexMax}">
    <ELeCenter>
      <ViewBoxPreview/>
    </ELeCenter>
    <CloseBtn @click="close"/>
  </div>
</template>

<script>
import ViewBoxPreview from '@/view/v/indexView'
import dataApiEdit from '@/view/data-api-edit'
import CloseBtn from '@/view/comm/CloseBtn'
import ELeCenter from '@/view/ELeCenter'
export default {
  components: {
    ViewBoxPreview,
    CloseBtn,
    ELeCenter
  },
  mounted () {
    this.bodyStyleOverflow = document.body.style.overflow
  },
  computed: {
    preview () {
      return dataApiEdit.preview
    },
    zIndexMax () {
      return dataApiEdit.zIndexMax
    }
  },
  methods: {
    close () {
      dataApiEdit.preview = false
    }
  },
  watch: {
    preview (preview) {
      if (preview) document.body.style.overflow = 'hidden'
      else document.body.style.overflow = this.bodyStyleOverflow
    }
  }
}
</script>

<style>
.l-preview {
  position:fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: auto;
  background-color: #aaa;
  /* z-index: 0; */
  /* .close-btn {
    z-index: 99;
  } */
}
</style>
